<template>
  <!-- 单向绑定 -->
  <button @click="componentName='OneWayBinding'">单向绑定</button>

  <!-- 双向绑定 -->
  <button @click="componentName='TwoWayBinding'">双向绑定</button>

  <!-- 依赖注入 -->
  <button @click="componentName='ProvideInject'">依赖注入</button>

  <component :is="componentName"/>
</template>

<script>
import {defineComponent} from 'vue';
import OneWayBinding from '@/components/one-way-binding/OneWayBinding.vue';
import TwoWayBinding from '@/components/two-way-binding/TwoWayBinding.vue';
import ProvideInject from '@/components/provide-inject/ProvideInject.vue';

export default defineComponent({
  components: {ProvideInject, TwoWayBinding, OneWayBinding},
  data() {
    return {
      componentName: ''
    };
  }
});
</script>

<style scoped>
button {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>
